---
title: Sidebar app config
---

::doc-component-demo
---
title: Sidebar presentation
---
The sidebar layout is a double sided navigation layout. It has a sidebar with a list of menu links and a subsidebar with a list of submenu links.

:doc-heading{label="Layout features"}

- **Navigation Sidebar Item:** The icon sidebar is the first part of the double sided navigation of the sidebar layout. It displays the logo and the main navigation icon links. Those navigation items can be displayed as a link or a button that triggers an action.

  :::doc-link-image
  ---
  src: /img/apps/tairo-layout.png
  srcDark: /img/apps/tairo-layout-dark.png
  ---
  :::


- **Navigation Subsidebar:** The subsidebar works as a submenu element for each navigation item. It's a custom component that you have to create. We provide a set of components and prebuilt variations to help you to build it.

  :::doc-link-image
  ---
  src: /img/apps/tairo-subsidebar.png
  srcDark: /img/apps/tairo-subsidebar-dark.png
  ---
  :::


- **Toolbar:** The toolbar is displayed at the top of the main content area. It can be used to display the current page title and a set of quick actions.

  :::doc-link-image
  ---
  src: /img/apps/tairo-toolbar.png
  srcDark: /img/apps/tairo-toolbar-dark.png
  ---
  :::


- **Cirular menu:** When scrolling down, the circular menu is displayed at the top right of the screen. It can be used to display a set of quick actions.

  :::doc-link-image
  ---
  src: /img/apps/tairo-circular-menu.png
  srcDark: /img/apps/tairo-circular-menu-dark.png
  ---
  :::


If you feel the sidebar has too many items for your app, you can use a smaller option that is the [collapse layout](/documentation/config/collapse).

::


::doc-component-demo
---
title: Sidebar configuration
---

First you need to enable the sidebar layout layer in the `nuxt.config.ts` file.

```ts [app/nuxt.config.ts]
export default defineNuxtConfig({
  extends: [
    '../layers/tairo-layout-sidebar',
  ]
})
```

Then you can configure the sidebar layout in the `app.config.ts` file.


```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      // sidebar config
    },
  },
})
```



:doc-heading{label="Default configuration"}

```ts [layers/tairo-layout-sidebar/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      circularMenu: {
        enabled: false,
        tools: [],
      },
      toolbar: {
        enabled: true,
        showTitle: true,
        showNavBurger: false,
        tools: [],
      },
      navigation: {
        enabled: true,
        startOpen: true,
        logo: {
          component: 'TairoLogo',
          resolve: true,
          props: { class: 'text-primary-600 h-10' },
        },
        items: [],
      },
    },
  },
})
```

You don't need to specify all the properties, only the ones you want to override.



:doc-heading{label="Tools"}

To add `tools` to the toolbar or the circular menu, you have to create global components, and add them to the `tools` array.

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      toolbar: {
        tools: [
          {
            // Use a global component
            component: 'DemoThemeToggle',
            // Define the component props, if any
            props: {
              disableTransitions: true,
            },
          },
        ],
      },
    },
  },
})
```


:doc-heading{label="Navigation Logo"}

The default configuration will display the logo in the sidebar as:

```vue
<TairoLogo class="text-primary-600 h-10" />
```

You can create a component with the same name
in your app to override the default logo. *(The component must be registered as global)*

Alternatively, you can display an image with:
```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      navigation: {
        logo: {
          component: 'img',
          props: { src: '/path/in/public/logo.png' },
        }
      }
    }
  }
})
```


:doc-heading{label="Navigation Items"}

```ts [app/app.config.ts]
export default defineAppConfig({
  tairo: {
    sidebar: {
      navigation: {
        items: [
          {
            // Title displayed in the sidebar 
            title: 'Dashboards',
            // Icon displayed in the sidebar
            // see https://icones.js.org/ 
            icon: { name: 'ph:sidebar-duotone', class: 'w-5 h-5' },
            // Path where the item is considered active
            activePath: '/dashboards',
            // Subsidebar global component to display 
            // when clicking on the item
            subsidebar: { component: 'DemoSubsidebarDashboards' },
            // OR Path to navigate to when clicking on the item
            to: '/dashboards/messaging',
            // OR Custom action to trigger 
            // when clicking on the item
            click: () => {
              alert('clicked on layouts')
            },
          },
        ]
      }
    }
  }
})
```

::



::doc-component-list{prefix="TairoSidebar"}
::


::doc-nav
---
prev: /documentation/config
next: /documentation/config/collapse
---
::